<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.solution.common.config.PublicConfig"%>
<%@ page import="com.solution.admin.home.constants.IndexConstants"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sl" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String basePath = PublicConfig.ROOT_PATH;
	String ossImgZoomWX = PublicConfig.OSS_IMG_ZOOM_WX; //微信图片缩放
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>邀请好友</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics_wx/css/style.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics_wx/css/main2.css">
<script type="text/javascript" src="<%=basePath%>/statics_wx/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics_wx/js/js.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics_wx/js/custom.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics/plugins/layer/layer.js"></script>
<script src="<%=basePath%>/statics/js/webform.js" type="text/javascript"></script>
<script type="text/javascript" src="<%=basePath%>/statics/js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics/js/clipboard.min.js"></script>

<script type="text/javascript">
var SystemImgPath = '<%=PublicConfig.IMG_ROOT_URL%>';
//系统域名 
var rootPath = '<%=basePath%>';
</script>
</head>
<c:set var="rootPath" value="<%=basePath%>"></c:set>
<c:set var="ossImgZoomWX" value="<%=ossImgZoomWX%>"></c:set>
<body style="background: url('${rootPath}/statics_wx/images/yq_bg.jpg') #c70001 no-repeat; background-size: cover">
	<div class="header3">
		<div class="icon_back">
			<a href="#"></a>
		</div>
		<h1>邀请好友</h1>
	</div>
	<div class="headerfixed"></div>
	<div class="yq_part1">
		<div class="yq_part1_con">
			<div class="yq_part1_con1">
				<div class="hd">
					<s></s>
					<div class="hd_con">
						<strong>1</strong>
						<p>邀请码邀请</p>
					</div>
				</div>
				<div class="bd">
					<div class="yq_info1">
						我的邀请码<br />
						<strong id="incitationCodeS">${incitationCode }</strong>
					</div>
					<div class="yq_info2">
						<p>
							<a id="copyBtn" href="javascript:void(0);" data-clipboard-action="copy" data-clipboard-target="#incitationCodeS">复制邀请码</a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="yq_part1" style="padding-top: 0.6rem">
		<div class="yq_part1_con">
			<div class="yq_part1_con1">
				<div class="hd">
					<s></s>
					<div class="hd_con">
						<strong>2</strong>
						<p>二维码邀请</p>
					</div>
				</div>
				<div class="bd">
					<div class="yq_info3">
						<input type="hidden" id="inviationCode" value="${incitationCode }"/>
						<div style="display:none;" id="inviationQrcode" align="center"></div>
						<div id="qrCodeDiv"></div>
						<%-- <img style="display:none;" src="<%=basePath%>/wx/my/invitationCode.jpg"/> --%>
						<span>长按二维码保存</span>
					</div>
					<!-- <div class="yq_info2">
						<p>
							<a href="javascript:void(0);" class="btn2" onclick="downloadQrImage();">下载二维码</a>
						</p>
					</div> -->
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
$(function(){
	var inviationCode = $("#inviationCode").val();
	$("#inviationQrcode").qrcode({
		render:"canvas",
		width:150,
		height:150,
		text:inviationCode
	});
	var canvasQrcode = document.getElementById("inviationQrcode").childNodes[0];
	var img = convertCanvasToImage(canvasQrcode);
	$("#qrCodeDiv").find("img[id='qrCodeImage']").remove();
	$("#qrCodeDiv").append(img);
})
//复制
var clipboard = new Clipboard('#copyBtn');
clipboard.on('success', function(e){
	layer.msg('已复制到剪切板', {
		time : 1000
	});
});
clipboard.on('error', function(e){
	layer.msg('复制失败，请手动选中复制', {
		time : 1000
	});
});
//下载二维码
function downloadQrImage(){
	var img = $("#qrCodeImage").attr("src");
	var alink = document.createElement("a");
	alink.href = img;
	alink.download = "我的分享码.jpg";
	alink.click();
}
//从 canvas 提取图片 image 
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	image.id = "qrCodeImage";
	image.width = "2.6rem";
	image.height = "2.6rem";
	return image;
}
</script>
</body>
</html>